<template>
  <div class="side">
    <el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="useState.isCollapse"
      @open="handleOpen" @close="handleClose" background-color="#304156" text-color="#fff" :unique-opened="true"
      :router="true">
      <el-menu-item index="/index">
        <el-icon>
          <StarFilled />
        </el-icon>
        <template #title @click="router.push('/index')">首页</template>
      </el-menu-item>
      <el-sub-menu :index="menu.id.toString()" v-for="menu in menuData" :key="menu.id">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>{{ menu.title }}</span>
        </template>
        <template v-for="item in menu.children" :key="item.id">
          <el-menu-item @click="menuItem(menu.name, item.name)" :index="'/' + menu.name + '/' + item.name"
            v-if="!item.hidden">{{
                item.title
            }}</el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
  
<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { useAdminState } from '@/store/modules/adminUser'
import { useRouter, useRoute } from 'vue-router';

// 注册路由
const router = useRouter()
const route = useRoute()
// 注册pinia数据
const useState = useAdminState()
// console.log(useState.getMenusList);
// 使用computed属性可以根据return内容的改变而改变
const menuData = computed(() => useState.getMenusList)

function handleOpen(params: unknown) { }
function handleClose(params: unknown) { }

const isCollapse = ref(false)

const menuItem = (menuTitle: string, itemTitle: string) => {
  router.push(`/${menuTitle}/${itemTitle}`)
}

</script>
  
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 90vh;
}

.el-menu--collapse {
  height: 90vh;
}
</style>